import _ from 'lodash'
import React from 'react'
import { BaseDetailPage, UdDetail, http, IBaseDetailPageState, IBaseDetailPageProps } from '../../../lib'
import { Button, Input,Modal } from 'antd'
import ButtonGroup from 'antd/lib/button/button-group'
import Dialog from '../component/DealWith/Dialog'
import apis from '@/apis/Suggestions'



class DealWithDetail extends BaseDetailPage<IDealWithDetailProps, IDealWithDetailState> {

  constructor(props) {
    super(props)
    this.state = {
      title: '投诉建议处理详情',
      visible:false,
      queryAction: () => {
        return http.get(apis.DealWithDetail, {
          params: {
            id: this.props.match.params.id
          }
        })
      }
    }
    console.log(this.props)
  }

  render() {
    return super.render({
      body: (
        <>
          <UdDetail title="查看详情" dataSource={this.state.dataSource} items={[
            { title: '客户编码', dataIndex: 'agentCode',col: { span: 8 } },
            { title: '客户名称', dataIndex: 'agentName',col: { span: 8 } },
            { title: '联系人', dataIndex: 'createdBy',col: { span: 8 } },
            { title: '联系电话', dataIndex: 'number',col: { span: 8 } },
            { title: '反馈标题', dataIndex: 'feedbackTitle' ,col: { span: 8 }},
            { title: '反馈时间', dataIndex: 'createdTime' ,col: { span: 8 }},
            { title: '问题图片', dataIndex: 'pic' ,col: { span: 8 },
              render:(Pic)=>{
                const urls = Pic.split(',')
                return(
                  <div >
                  {urls.map(url => (<img src={url} alt="" className="picSize" onClick={this.handelOpenpic}/>))}
                  <Modal
                      className="madelWeaper"
                      visible={this.state.visible}
                      footer={null}
                      onCancel={this.handleCancel}
                    >
                    <img src={this.state.visibleImgUrl} alt="问题图片" className="picModel" />
                  </Modal>
                 </div>
                )
              }
            },
            { title: '投诉建议类型', dataIndex: 'complaintTypeName', col: { span: 24 } },
            { title: '往期内容', dataIndex: 'messages',col: { span: 24 },
              render:(value)=>{return<Dialog value={value} />}
            },

          ]} />
          
        </>
      ),
    })
  
  }
   private handelOpenpic = (e) =>{ //打开图片模态框
    const visibleImgUrl = e.target.src
    this.setState({
      visible: true,
      visibleImgUrl,
    });
   }
   private handleCancel = () => {
    this.setState({
      visible: false,
    });
  }
}

interface IDealWithDetailProps extends IBaseDetailPageProps<{
  id: string
}> {
 
}

interface IDealWithDetailState extends IBaseDetailPageState {
  visible:boolean
  visibleImgUrl?: string
}

export default DealWithDetail
